<template>
	<view class="u-swiper">
		<view class="content">
			<view class="yong">
				当前佣金
				<text @click="sun" style="margin-left:90px;">提现记录 ></text>
				<view class="jing">{{ commission }}</view>
			</view>
			<view class="zuo">
				昨日收益
				<span>{{ lastday }}</span>
			</view>
			<view class="lei">
				累计已提
				<span>{{ extrac }}</span>
			</view>
		</view>
		<view class="sur">
			<button
				@click="theics"
				style="background-color: red;color: #fff;width: 90px;font-size: 10px;margin-top: 5px;border-radius: 20px;"
			>
				立即提现
			</button>
		</view>
		<view class="box">
			<!-- 推广名片 -->
			<view class="box1">
				<image
					src="../../static/distribution/er.png"
					mode=""
					style="width: 40px;height: 40px;"
				></image>
				<br />
				<text @click="busine">推广名片</text>
			</view>
			<!-- 推广人统计 -->
			<view class="box2">
				<image
					src="../../static/distribution/tong.png"
					mode=""
					style="width: 40px;height: 40px;"
				></image>
				<br />
				<text @click="theic">推广人统计</text>
			</view>
		</view>
		<!-- 佣金明细 -->
		<view class="num">
			<view class="box3">
				<image
					src="../../static/distribution/jin.png"
					mode=""
					style="width: 40px;height: 40px;"
				></image>
				<br />
				<text @click="yong">佣金明细</text>
			</view>

			<!-- 推广人订单 -->
			<view class="box4">
				<image
					src="../../static/distribution/ding.png"
					mode=""
					style="width: 40px;height: 40px;"
				></image>
				<br />
				<text @click="order">推广人订单</text>
			</view>
		</view>
		<!-- 推广人排行 -->
		<view class="num1">
			<view class="box5">
				<image
					src="../../static/distribution/huang.png"
					mode=""
					style="width: 40px;height: 40px;"
				></image>
				<br />
				<text style="margin-top: 20px;" @click="the">推广人排行</text>
			</view>

			<!-- 佣金排行 -->
			<view class="box6">
				<image
					src="../../static/distribution/pai.png"
					mode=""
					style="width: 40px;height: 40px;"
				></image>
				<br />
				<text @click="comm">佣金排行</text>
			</view>
		</view>
		<Aside></Aside>
	</view>
</template>

<script>
import Aside from "@/components/asideNav.vue";
import {comm, commiss} from "../../network/pointer.js";
export default {
	data() {
		return {
			commission: "",
			lastday: "",
			extrac: ""
		};
	},
	components: {
		Aside
	},
	async created() {
		let res = await commiss();
		console.log(res);
		this.commission = res.data.commissionCount;
		this.lastday = res.data.lastDayCount;
		this.extrac = res.data.extractCount;
	},
	onLoad() {},
	methods: {
		sun() {
			uni.navigateTo({
				url: "/pages/points/withdrawal"
			});
		},
		yong() {
			uni.navigateTo({
				url: "/pages/points/mission"
			});
		},
		busine() {
			uni.navigateTo({
				url: "/pages/points/business"
			});
		},
		order() {
			uni.navigateTo({
				url: "/pages/points/order"
			});
		},
		comm() {
			uni.navigateTo({
				url: "/pages/points/commission"
			});
		},
		the() {
			uni.navigateTo({
				url: "/pages/points/thelist"
			});
		},
		theic() {
			uni.navigateTo({
				url: "/pages/points/statistical"
			});
		},
		theics() {
			uni.navigateTo({
				url: "/pages/points/mount"
			});
		}
	}
};
</script>

<style scoped>
.u-swiper {
	background-color: #f5f5f5;
	height: 100vh;
	width: 100vw;
	position: relative;
}
.content {
	width: 300vw;
	background-color: #e93323;
	margin: auto;
	height: 25vh;
	border-radius: 5px 5px 0 0;
}
.yong {
	position: absolute;
	color: #fff;
	left: 44%;
	top: 5%;
	font-size: 12px;
}
.jing {
	margin-top: 15px;
	font-size: 30px;
	margin-left: -5px;
}
/* 昨日收益 */
.zuo {
	display: flex;
	flex-direction: column;
	color: #f5f5f5;
	font-size: 12px;
	position: absolute;
	top: 20%;
	left: 10%;
}
/* 累计提现样式 */
.lei {
	display: flex;
	flex-direction: column;
	color: #fff;
	font-size: 12px;
	position: absolute;
	top: 20%;
	left: 78%;
}
.sur {
	background-color: #f5f5f5;
	width: 45vw;
	height: 8vh;
	margin-left: 110px;
	margin-top: -15px;
	border-radius: 30px;
	overflow: hidden;
}
.box {
	margin-left: 15px;
	display: flex;
	margin-bottom: 10px;
}
.box1 {
	width: 45vw;
	height: 15vh;
	background-color: #fff;
	text-align: center;
}
.box2 {
	width: 45vw;
	height: 15vh;
	background-color: #fff;
	margin-left: 10px;
	text-align: center;
}
.box3 {
	width: 45vw;
	height: 15vh;
	background-color: #fff;
	margin-left: 10px;
	text-align: center;
}
.box4 {
	width: 45vw;
	height: 15vh;
	background-color: #fff;
	margin-left: 10px;
	text-align: center;
}
.num {
	margin-left: 5px;
	display: flex;
	margin-bottom: 10px;
}
.box5 {
	width: 45vw;
	height: 15vh;
	background-color: #fff;
	margin-left: 10px;
	text-align: center;
}
.box6 {
	width: 45vw;
	height: 15vh;
	background-color: #fff;
	margin-left: 10px;
	text-align: center;
}
.num1 {
	margin-left: 5px;
	display: flex;
}
image {
	margin-top: 30px;
}
</style>
